<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Category</title>
<script type="text/javascript" src="<c:url value="/js/jquery.js"/>"></script>
<script src="<c:url value="/js/jquery.cookie.js"/>"></script>
<script src="<c:url value="/js/bootstrap.min.js"/>"></script>
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/bootstrap.min.css"/>">

<script type="text/javascript">     
      
          
            	function editRow(index, id, name){
            		$("#categoryId").val(id);
            		
            		$('[id="row_'+id+'"]').html(
            				'<td>'+index+'</td>' +
            				'<td> <input type="text" name="name" size="60" value="'+name+'"/></td>'+
            				'<td><input type="submit" value="Update" /></td>'
            		); 	
            		
            		$(".li_edit").css("display", "none");
            		
                }
            
            
        </script>


</head>
<body>
	<form:form commandName="category">
		<table>
			<tr>
				<td>Category:</td>
				<td><form:input path="name" size="60" /></td>
				<td><input type="submit"
					value="Add" /></td>
			</tr>
		</table>
	</form:form>

	<form id="updateForm" action="<c:url value="/category/update"/>" method="post">
	<input type="hidden" id="categoryId" name ="id"/>
	<table class="table table-bordered table-hover">
		<tr>
			<th>No.</th>
			<th>Category</th>
			<th>Action</th>
		</tr>
		<c:forEach var="category" items="${categoryList}"
			varStatus="categoryStatus">
			<tr id="row_${category.id}">
				<td>${categoryStatus.index+1}</td>
				<td>${category.name}</td>
				<td>
					<div class="btn-group">
						
						<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
							href="#"><i class="icon-th-large icon-white"></i><span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li class="li_edit"><a id="edit_${category.id}" href="#"
								onClick="editRow(${categoryStatus.index+1}, ${category.id}, '${category.name}')">
									<i class="icon-pencil"></i> Edit
							</a></li>
							<li><a
								href="<c:url value="/category/delete/${category.id}" />"><i
									class="icon-trash"></i> Delete</a></li>
						</ul>
					</div>
				</td>
			</tr>
		</c:forEach>
	</table>
	</form>
</body>
</html>